<template>
  <div style="padding-bottom:94px;">
    <div v-title>提交投保信息</div>
    <div class="box">
      <div class="title">
        <div>{{this.$route.params.name}}</div>
      </div>
      <div>
        <van-cell-group>
          <van-field v-model="names" label="车主姓名" icon="clear" placeholder="请输入车主姓名" @click-icon="names = ''" />
          <van-field v-model="numbe" label="车牌号码" icon="clear" placeholder="请输入车牌号码" @click-icon="numbe = ''" />
        </van-cell-group>
      </div>
      <div class="photo">
        <p>车主身份证正反面照片<span>（上传照片要求字迹清晰可辨识）</span></p>
        <div style="overflow: hidden;">
          <Up @imgbase="Uone" style="width:48%;float:left;">
          </Up>
          <Up @imgbase="Utwo" style="width:48%;float:right;">
          </Up>
        </div>
        <p>车主行驶证正副本照片<span>（上传照片要求字迹清晰可辨识）</span></p>
        <div style="overflow: hidden;">
          <Up @imgbase="Uthree" style="width:48%;float:left;">
          </Up>
          <Up @imgbase="Ufour" style="width:48%;float:right;">
          </Up>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="kf"  @click="phone">
        <a class="iconfont icon-kefu"></a>
        <p>客服</p>
      </div>
      <div class="next" @click="next()" v-show="twice == false">
        获取报价
      </div>
      <div class="next" v-show="twice == true">
        <van-loading type="circle" color="black" style="display: inline-block; margin-right: 10px; top: -2px;"/>获取报价中...
      </div>
    </div>
  </div>
</template>
<script>
  import api from '../fetch/api.js';
  import Address from '../js/addressData.json'
  import upload from '../components/loadImg.vue'
  import {
    Uploader,
    Field,
    Cell,
    CellGroup,
    Area,
    Popup,
    Toast,
    Loading 
  } from 'vant';
  export default {
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Uploader.name]: Uploader,
      [Field.name]: Field,
      [Area.name]: Area,
      [Popup.name]: Popup,
      [Toast.name]: Toast,
      [Loading.name]: Loading,
      'Up':upload,
    },
    data() {
      return {
        //省市选择
        show: false,
        areaList: Address.arealist,
        changeAddress: '',
        //
        names: '',
        numbe: '',
        //自定义
        UpImg1: 'http://upfile.nbbaijin.com/upload/20180312/27a9298f4b784736a2e83fddfb358672.jpg',
        UpImg2: 'http://upfile.nbbaijin.com/upload/20180312/27a9298f4b784736a2e83fddfb358672.jpg',
        UpImg3: 'http://upfile.nbbaijin.com/upload/20180312/27a9298f4b784736a2e83fddfb358672.jpg',
        UpImg4: 'http://upfile.nbbaijin.com/upload/20180312/27a9298f4b784736a2e83fddfb358672.jpg',
        Img1: '',
        Img2: '',
        Img3: '',
        Img4: '',
        QuoteInfor: '',
        twice:false,
      }
    },
    methods: {
      next() {
        let data = {
          InsuranceID: this.$route.params.id,
          CarOwner: this.names,
          PlateNumber: this.numbe,
          IDFrontPhoto: this.Img1,
          IDAfterPhoto: this.Img2,
          DrivingFrontPhoto: this.Img3,
          DrivingAfterPhoto: this.Img4,
        }
        // console.log(data)
        if (data.CarOwner == '') {
          Toast.fail('请填写车主姓名');
          return;
        }
        if (data.PlateNumber == '') {
          Toast.fail('请填写车牌号码');
          return;
        }
        if (data.IDFrontPhoto == '' || data.IDAfterPhoto == '' || data.DrivingFrontPhoto == '' || data.DrivingAfterPhoto == '') {
          Toast.fail('请检查照片是否上传完整');
          return;
        }
        this.twice = true
        api.Post('Order/PHQuoteInfo/AddQuote', data).then(res => {
            if (res.Success == true) {
              Toast.success(res.Msg);              
              this.$router.push('/WaitFor')
            } else {                    
              this.twice = false
              Toast.fail(res.Msg);
            }
          })
      },
      //图片上传
      Uone(s){
        this.UpImg1 = s
        this.Img1 = s
      },
      Utwo(s){
        this.UpImg2 = s
        this.Img2 = s
      },
      Uthree(s){
        this.UpImg3 = s
        this.Img3 = s
      },
      Ufour(s){
        this.UpImg4 = s
        this.Img4 = s
      },
      //省市区选择
      confirm(Num) {
        for (var i = 0; i < Num.length; i++) {
          if (Num[i].code == -1) {
            Toast.fail('请正确选择省市！');
            return;
          }
        }
        this.provinceID = Num[0].code.substr(0, 2)
        this.cityID = Num[1].code.substr(2, 3)
        this.userprovince = Num[0].name
        this.usercity = Num[1].name
        this.changeAddress = Num[0].name + Num[1].name
        this.show = false;
      },
      cancel() {
        this.show = false;
      },
      phone(){
          window.location.href = "tel:400-170-1235";
      }
    }
  }

</script>
<style scoped>
  .box {
    width: 94%;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
    background: #fff;
    border-radius: 3px;
  }

  .title {
    border-bottom: 1px solid #ccc;
    padding: 10px;
  }

  .title div {
    border-left: 3px solid #2491ff;
    padding-left: 7px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
  }

  .check {
    padding: 10px 0;
    margin: 0 10px;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .check h4 {
    margin: 0;
    font-weight: normal;
  }

  .check p {
    margin: 0;
    color: #999;
    font-size: 12px;
  }

  .check span {
    position: absolute;
    right: 0;
    top: 20px;
    color: #333;
    font-size: 14px;
  }

  .info {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin: 0 10px;
  }

  .info p {
    margin: 0;
    padding: 10px 0 0 0;
    font-size: 14px;
    color: #333;
  }

  .photo {
    margin: 0 10px;
    padding-bottom: 15px;
  }

  .photo p {
    color: #333;
    font-size: 14px;
    margin: 10px 0;
  }

  .photo span {
    font-size: 12px;
    color: #999;
  }

  .photo img {
    width: 42vw;
    height: 28vw;
    border-radius: 3px;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background: #fff;
    height: 50px;
    border-top: 1px solid #eee;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .kf {
    width: 20%;
    float: left;
    border-right: 1px solid #eee;
    margin-right: -1px;
    text-align: center;
  }

  .kf a {
    color: #2491ff;
    font-size: 24px;
    margin-top: 5px;
    display: block;
  }

  .kf p {
    margin: 0;
    font-size: 12px;
    color: #666;
  }

  .next {
    width: 80%;
    float: right;
    line-height: 55px;
    background: #2491ff;
    color: #fff;
    text-align: center;
    font-size: 16px;
  }

  .ctm {
    width: 94%;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
    background: #fff;
    border-radius: 3px;
    font-size: 14px;
  }

  .ctm h4 {
    color: #999;
    font-weight: inherit;
    margin: 5px 10px;
    font-size: 14px;
  }

  .ctm p {
    margin: 5px 10px;
    color: #333;
  }

  .ctm span {
    float: right;
  }

</style>
<style>
  .van-checkbox__control:checked+.van-icon-success {
    border-color: #2491ff;
    background-color: #2491ff;
  }

</style>
<style src="../css/iconfont.css"></style>
